/* eslint-disable */
<template>
  <div>
    <div id="map"></div>
    <div class="calculation-box">
      <p>Click the map to draw a polygon.</p>
      <div id="calculated-area"></div>
    </div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import  'mapbox-gl/dist/mapbox-gl.css';
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import turf from "@turf/turf";
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

var map;
export default {
  name: "MapboxDemo",
  props: {},
  data() {
    return {}
  },
  methods: {
    /**
     *初始化数据
     */
    initDataMethods() {

    },
  },
  created() {
    this.initDataMethods()
  },
  mounted() {
    mapboxgl.accessToken = 'pk.eyJ1IjoiZHl4OTU0MSIsImEiOiJja2hrMTFyeHQwZjJsMzVwOWw0YXBmbm41In0.rR_FIu88gbotM43emkub1A';
    map = new mapboxgl.Map({

      container: 'map', // container ID
      style: {
        'version': 8,
        'sources': {
          'raster-tiles': {
            'type': 'raster',
            'tiles': [
              'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=09b48d1eb63acec9d04eaecd53e76207'
            ],
            'tileSize': 256,
            'attribution': ''
          }    ,   'raster-tiles-tdt-text': {
            'type': 'raster',
            'tiles': [
              'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=09b48d1eb63acec9d04eaecd53e76207'
            ],
            'tileSize': 256,
            'attribution': '' }
        },
        'layers': [
          {
            'id': 'simple-tiles',
            'type': 'raster',
            'source': 'raster-tiles',
            'minzoom': 0,
            'maxzoom': 22
          },      {
            'id': 'tiles-tdt-text',
            'type': 'raster',
            'source': 'raster-tiles-tdt-text',
            'minzoom': 0,
            'maxzoom': 22
          },
        ]
      },
      // style: 'mapbox://styles/mapbox/dark-v10', // style URL
      center: [108.066844, 33.850786], // starting position [lng, lat]
      zoom: 3, // starting zoom
    });
    console.log(map)

    const draw = new MapboxDraw({
      displayControlsDefault: false,
// Select which mapbox-gl-draw control buttons to add to the map.
      controls: {
        polygon: true,
        line_string: true,
        arrow_single: true,
        trash: true
      },
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
      defaultMode: 'draw_polygon'
    });
    map.addControl(draw);

    map.on('draw.create', updateArea);
    map.on('draw.delete', updateArea);
    map.on('draw.update', updateArea);


    function updateArea(e) {
      const data = draw.getAll();
      const answer = document.getElementById('calculated-area');
      if (data.features.length > 0) {
        console.log(data)
        if(turf ===undefined ){
          return
        }
        const area = turf.area(data);
// Restrict the area to 2 decimal points.
        const rounded_area = Math.round(area * 100) / 100;
        answer.innerHTML = `<p><strong>${rounded_area}</strong></p><p>square meters</p>`;
      } else {
        answer.innerHTML = '';
        if (e.type !== 'draw.delete')
          alert('Click the map to draw a polygon.');
      }
    }
  },
  computed: {
    // ...mapGetters([
    //   'userApp', 'token'
    // ])
  },
  watch: {},
}
</script>
<style>
#map { position: absolute; top: 10px; bottom: 10px; width: 1500px;height: 500px; }

</style>
<style lang="scss" scoped>
#map { position: absolute; top: 10px; bottom: 10px; width: 1500px;height: 500px; }

</style>
